<template>
    <div class="search">
        <header>
            <div class="left">
                <el-icon style="vertical-align: middle">
                    <Tickets />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div>
                <el-button type="primary" @click="add()">添加</el-button>
            </div>
        </header>
    </div>


    <el-dialog v-model="dialogFormVisible" title="分配角色">
        <el-form :model="form" ref="formRef">
            <el-form-item label="账号：" :label-width="formLabelWidth">
                <el-input v-model="form.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="姓名：" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱：" :label-width="formLabelWidth">
                <el-input v-model="form.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码：" :label-width="formLabelWidth">
                <el-input v-model="form.password" autocomplete="off" type="password" />
            </el-form-item>
            <el-form-item label="备注：" :label-width="formLabelWidth">
                <el-input v-model="form.note" autocomplete="off" type="textarea" />
            </el-form-item>
            <el-form-item label="是否启用" :label-width="formLabelWidth">
                <el-radio-group v-model="form.icon">
                    <el-radio label="是" />
                    <el-radio label="否" />
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="resetForm()">取消</el-button>
                <el-button type="primary" @click="submitForm()">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
    
<script setup lang='ts'>
import { Tickets } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import * as http from '@/request/api'
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'
const formRef = ref<FormInstance>()
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
    username: '',
    name: '',
    email: '',
    password: '',
    note: '',
    icon: ''
})
const add = () => {
    dialogFormVisible.value = true
}


const submitForm = () => {

    ElMessageBox.confirm(
        '此操作将添加当前用户信息, 是否继续?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let res = await http.admin.getAdminRegister({
                username: form.username,
                nickName: form.name,
                email: form.email,
                password: form.password,
                note: form.note,
                icon: form.icon,
            })

            if (res.code == 200) {
                ElMessage.success(res.message)
            } else {
                ElMessage.error(res.message)
            }

            dialogFormVisible.value = false
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '用户取消',
            })

            dialogFormVisible.value = false
        })
}

const resetForm = () => {

    dialogFormVisible.value = false
}
</script>
    
<style lang="less" scoped >
.search {
    margin: 30px 0;
    padding: 20px;
    box-shadow: 0 0 20px #ccc;

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left span {
            padding-left: 15px;
        }
    }

    section {
        padding: 20px 0 10px;
    }
}
</style>